<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#ul1{
			background-color: green;
		}
		#ul2{
			background-color: red;
		}
	</style>
	<script type="text/javascript">
	window.onload=function(){
		var ul1 = document.getElementById('ul1');
		var ul2 = document.getElementById('ul2');
        var button = document.getElementById('button');


        button.onclick=function(){
            
        	var li=ul1.children[0];
             
        	//ul1.removeChild(li);
        	ul2.appendChild(li); 
        	//appendChild  
        	//1，先把元素从原来的父级上删除
        	//2，添加到新的父级
        	//3,  所以我们不需要经过删除removeChild这一步
        	//4，因为我们的这个LI元素本身就是从原来的UL1这边拿过来的
        };
     };
	</script>
</head>
<body>


	<ol id="ul1">
		<li>53453</li>
		<li>dg</li>
		<li>fdg</li>
		<li>534</li>
		<li>gfd</li>
	</ol>
   <input type="button" value="移动" id="button" />
	<ol id="ul2">

	</ol>	
</body>
</html>